<template>
  <div class="main">
    <v-indexTop></v-indexTop>
    <div class="lunbo">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="index in images" :key="index">
          <img :src="index" />
        </el-carousel-item>
      </el-carousel>
      <div class="login_ui">
        <ul class="ul_login">
          <li v-if="login_case">
            <div class="operation-title">
              <span class="operation-active">登录/注册</span>
              <span class="" @click="check_login()">密码登录</span>
            </div>
            <el-input placeholder="大陆手机号" v-model="phone_num"  @blur="chk_phone()" ></el-input>
            <el-input
              placeholder="短信验证码"
              show-password
              v-model="phone_code"
            >
            </el-input>
            <el-button type="primary" @click="login()"
              >验证码登录/注册</el-button
            ><router-link tag="a" class="zhmm" :to="{ path: '/re_password' }"
              >找回密码</router-link
            >
            <el-button
              type="primary"
              @click="sendMes()"
              :disabled="disable"
              round
              >{{ send_ver_code }}</el-button
            >
          </li>
          <li v-else>
            <div class="operation-title">
              <span class="operation-active" @click="check_login()"
                >登录/注册</span
              >
              <span class="">密码登录</span>
            </div>
            <el-input placeholder="大陆手机号" v-model="phone_num" @blur="chk_phone()" ></el-input>
            <el-input placeholder="密码" show-password v-model="phone_code">
            </el-input>
            <el-button type="primary" @click="login()" style="width: 100px"
              >登&nbsp;&nbsp;&nbsp;录&nbsp;&nbsp;</el-button
            ><a href="" class="zhmm">找回密码</a>
          </li>
        </ul>
      </div>
      <div class="center">
        <div class="search">
          <el-input
            placeholder="输入职位关键词：如 销售总监等"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <p class="new-post">
            本周新增职位&nbsp;&nbsp;<span>6</span><span>9</span><span>6</span
            ><span>3</span><span>7</span>&nbsp;&nbsp;个
          </p>
        </div>
        <div class="job_type">
          <p class="subsite-btn clearfix" data-selector="subsite-btn">
            <a target="_blank" href="https://www.liepin.com/it/">
              <span class="icons24 icons24-it"></span>
              <b>IT·互联网</b>
            </a>
            <a target="_blank" href="https://www.liepin.com/realestate/">
              <span class="icons24 icons24-estate"></span>
              <b>房地产</b>
            </a>
            <a
              class="finance"
              target="_blank"
              href="https://www.liepin.com/financial/"
            >
              <span class="icons24 icons24-financial"></span>
              <b>金 融</b>
            </a>
            <a target="_blank" href="https://www.liepin.com/consumergoods/">
              <span class="icons24 icons24-consumer"></span>
              <b>消费品</b>
            </a>
            <a target="_blank" href="https://www.liepin.com/automobile/">
              <span class="icons24 icons24-car"></span>
              <b>汽车·制造</b>
            </a>
            <a target="_blank" href="https://www.liepin.com/medicine/">
              <span class="icons24 icons24-medicine"></span>
              <b>医疗·化工</b>
            </a>
          </p>

          <div data-selector="each-industry" class="job_type_center">
            <div class="j_left">
              <h2>互联网</h2>
              <ul>
                <li>Java</li>
                <li>Python</li>
                <li>Vue</li>
                <li>Golang</li>
                <li>Vue</li>
                <li>Golang</li>
                <li>Vue</li>
                <li>Golang</li>
              </ul>
            </div>
            <div class="j_right">
              <ul>
                <li>
                  <div>
                    <img :src="com_imgs[0]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img :src="com_imgs[1]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img :src="com_imgs[2]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img :src="com_imgs[3]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div data-selector="each-industry" class="job_type_center">
            <div class="j_left">
              <h2>互联网</h2>
              <ul>
                <li>Java</li>
                <li>Python</li>
                <li>Vue</li>
                <li>Golang</li>
                <li>Vue</li>
                <li>Golang</li>
                <li>Vue</li>
                <li>Golang</li>
              </ul>
            </div>
            <div class="j_right">
              <ul>
                <li>
                  <div>
                    <img :src="com_imgs[0]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img :src="com_imgs[1]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img :src="com_imgs[2]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img :src="com_imgs[3]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div data-selector="each-industry" class="job_type_center">
            <div class="j_left">
              <h2>互联网</h2>
              <ul>
                <li>Java</li>
                <li>Python</li>
                <li>Vue</li>
                <li>Golang</li>
                <li>Vue</li>
                <li>Golang</li>
                <li>Vue</li>
                <li>Golang</li>
              </ul>
            </div>
            <div class="j_right">
              <ul>
                <li>
                  <div>
                    <img :src="com_imgs[0]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img :src="com_imgs[1]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img :src="com_imgs[2]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img :src="com_imgs[3]" />
                    <div class="com-info">
                      <p class="com-name">上海某某某有限公司</p>
                      <p class="xinzi">
                        25k-30k·15薪<span>&nbsp;&nbsp;北京</span>
                      </p>
                      <p>公司规模：299-999人</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-indexButtom></v-indexButtom>
  </div>
</template>

<script>
import indexTop from "./assemblyPublic/Index-top";
import indexButtom from "./assemblyPublic/Index-buttom";
export default {
  name: "HelloWorld",
  data() {
    return {
      phone_num: "",
      phone_code: "",
      send_ver_code: "获取验证码",
      send_time: 5,
      disable: null,
      login_case: true,
      user_exist: false,
      images: [
        require("../assets/img/img_01.png"),
        require("../assets/img/img_02.png"),
      ],
      com_imgs: [
        require("../assets/img/compony0.png"),
        require("../assets/img/compony1.png"),
        require("../assets/img/compony2.png"),
        require("../assets/img/compony3.png"),
      ],
    };
  },
  methods: {
    //切换登陆方式
    check_login() {
      if (this.login_case) {
        this.login_case = false;
      } else {
        this.login_case = true;
      }
    },
    //登录
    login() {
      if (this.user_exist) {//用户存在
        this.$axios({
          method: "POST",
          url: "api/login/",
          data: {
            phone_num: this.phone_num,
            phone_code: this.phone_code,
          },
        })
          .then((result) => {
            // console.log(result.data);
            if (result.data.login_case == "on") {
              // alert("登录成功！");
                this.$router.push({
                  path: "/indexMainPage",
                });
                this.$session.set("userPhone",this.phone_num); //存电话进session
            } else {
              alert("验证码错误，登录失败！");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }else{//新用户
        this.$router.push({
          path: "/resumePage",
        });
        this.$session.set("userPhone",this.phone_num); //存电话进session
      }
    },
    chk_phone(){
      //手机号是否存在
       this.$axios({
          method: "POST",
          url: "api/chk_phone",
          data: {
            Account_num: this.phone_num,
          },
        })
          .then((data) => {
            if (data.data.login_case == "ok") {
              this.user_exist = true;
            }else{
              this.user_exist = false;
            }
            console.log(data.data);
          })
          .catch((error) => {
            close.log(error);
          });
    },
    //发送短信
    sendMes() {
      //验证手机号
      if (
        /^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(
          this.phone_num
        )
      ) {
        //倒计时
        var interval = setInterval(() => {
          this.send_time--;
          if (this.send_time == 0) {
            this.send_ver_code = "获取验证码";
            this.send_time = 5;
            clearInterval(interval);
          } else {
            this.send_ver_code = this.send_time + "s后重新获取";
          }
        }, 1000);
        //发送验证码
        this.$axios({
          method: "POST",
          url: "api/send_phone",
          data: {
            phone_num: this.phone_num,
          },
        })
          .then((result) => {
            if (result.data.send_case == "on") {
              alert("短信验证码：" + result.data.code);
            } else {
              alert("短信发送失败！");
            }
          })
          .catch((err) => {});
      } else {
        alert("请输入正确的手机号！");
      }
    },
  },
  components: {
    "v-indexTop": indexTop,
    "v-indexButtom": indexButtom,
  },
};
</script>

<style>
</style>
